import type { Metadata } from 'next';
import Link from 'next/link';
import { EnabledToggle, RunNowButton } from '@/components/admin/actions';
import { AdminError, AdminHeader, JsonInline, RunsTable, SectionTitle } from '@/components/admin/ui';
import { Pagination } from '@/components/ui/pagination';
import { adminApi, safeAdmin } from '@/lib/admin-api';
import { fmtAgo, fmtDateTime } from '@/lib/format';

export async function generateMetadata({ params }: { params: Promise<{ name: string }> }): Promise<Metadata> {
  const { name } = await params;
  return { title: `${name} runs` };
}

export default async function AdminConnectorPage({ params, searchParams }: { params: Promise<{ name: string }>; searchParams: Promise<{ page?: string }> }) {
  const { name } = await params;
  const sp = await searchParams;
  const page = Math.max(1, Number(sp.page) || 1);
  const [runsRes, overviewRes] = await Promise.all([safeAdmin(adminApi.connectorRuns(name, page, 50)), safeAdmin(adminApi.overview())]);
  const connector = overviewRes.data?.data.connectors.find((c) => c.name === name) ?? null;
  const now = Date.now();
  return (
    <>
      <AdminHeader
        title={<span className="mono">{name}</span>}
        lede={connector ? `${connector.source_name} · ${connector.description ?? ''}` : 'Connector runs and errors'}
        action={
          <div className="flex flex-wrap items-center gap-2">
            <RunNowButton name={name} />
            {connector && <EnabledToggle name={name} enabled={connector.enabled} />}
            <Link href="/admin" className="text-sm text-accent hover:underline">
              ← Overview
            </Link>
          </div>
        }
      />
      {connector && (
        <dl className="grid grid-cols-2 gap-3 text-sm md:grid-cols-4">
          <div>
            <dt className="eyebrow">Enabled</dt>
            <dd className={connector.enabled ? 'text-active' : 'text-warn'}>{connector.enabled ? 'yes' : 'no'}</dd>
          </div>
          <div>
            <dt className="eyebrow">Last success</dt>
            <dd title={fmtDateTime(connector.last_success_at)}>{fmtAgo(connector.last_success_at, now)}</dd>
          </div>
          <div>
            <dt className="eyebrow">Last attempt</dt>
            <dd title={fmtDateTime(connector.last_attempt_at)}>{fmtAgo(connector.last_attempt_at, now)}</dd>
          </div>
          <div>
            <dt className="eyebrow">Next run</dt>
            <dd>{fmtDateTime(connector.next_run_at)}</dd>
          </div>
          <div className="col-span-2 md:col-span-4">
            <dt className="eyebrow">Config</dt>
            <dd>
              <JsonInline value={connector.config} />
            </dd>
          </div>
        </dl>
      )}

      {runsRes.error !== null ? (
        <div className="mt-6">
          <AdminError message={runsRes.error} />
        </div>
      ) : (
        <>
          <SectionTitle>Runs</SectionTitle>
          <RunsTable runs={runsRes.data.data} now={now} showConnector={false} emptyLabel="This connector has never run" />
          <Pagination className="mt-4" page={runsRes.data.pagination.page} pages={runsRes.data.pagination.pages} total={runsRes.data.pagination.total} pageSize={runsRes.data.pagination.page_size} makeHref={(p) => `/admin/connectors/${encodeURIComponent(name)}?page=${p}`} />

          <SectionTitle>Recent errors</SectionTitle>
          {runsRes.data.errors.length === 0 ? (
            <p className="rounded-md border border-dashed border-rule-strong px-4 py-6 text-center text-sm text-ink-3">No errors recorded</p>
          ) : (
            <ul className="divide-y divide-rule border-y border-rule">
              {runsRes.data.errors.map((e) => (
                <li key={e.id} className="grid gap-1 py-2.5 text-sm sm:grid-cols-[160px_140px_minmax(0,1fr)] sm:gap-4">
                  <span className="text-ink-2" title={fmtDateTime(e.occurred_at)}>
                    {fmtAgo(e.occurred_at, now)}
                  </span>
                  <span className="mono text-xs text-danger">{e.error_type ?? 'Error'}</span>
                  <span className="min-w-0">
                    <span className="mono break-words text-xs text-ink">{e.message ?? '—'}</span>
                    {e.run_id && <span className="mono ml-2 text-[11px] text-ink-3">{e.run_id}</span>}
                    {e.context && <JsonInline value={e.context} className="mt-1" />}
                  </span>
                </li>
              ))}
            </ul>
          )}
        </>
      )}
    </>
  );
}